<template>
    <div>
        <Drawer :closable="false" width="640" placement="left" v-model="showValue">
            <p :style="pStyle">日志记录</p>
            <tables ref="tables" search-place="top"
                    v-model="tableData"
                    :columns="columns"
                    :loading="loading">
                <template slot="action" slot-scope="props">
                    <Button type="primary" size="small" @click="handleViewDetails(props)">查看详情</Button>
                </template>
                <template slot="time" slot-scope="props">
                    <datetime-interval :time="props"></datetime-interval>
                </template>
            </tables>
        </Drawer>

        <log-details :fullscreen="false" v-model="detailModal" :formItem="selectData" :width="800"></log-details>

    </div>
</template>

<script>
    import Tables from '_c/tables';
    import LogDetails from '../../log-manage/shared/log-details';
    import DatetimeInterval from '_c/datetime-interval';
    import tableColumns from './table-columns';
    import {query as LogQuery} from '@/api/log';

    export default {
        name: 'LogInfoDrawer',
        components: {
            Tables,
            DatetimeInterval,
            LogDetails
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                showValue: false,
                loading: false,
                tableData: [],
                pStyle: {
                    fontSize: '16px',
                    color: 'rgba(0,0,0,0.85)',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px'
                },
                selectData: {},
                //详情模态框是否显示
                detailModal: false,
            };
        },
        computed: {
            columns() {
                return tableColumns.columns(this);
            },
        },
        methods: {
            handleViewDetails(info) {
                this.selectData = info;
                this.detailModal = true;
            },
            queryLog(queryData) {
                this.loading = true;
                LogQuery(queryData).then(res => {
                    this.tableData = res.Data.List;
                    this.loading = false;
                });
            }
        },
        watch: {
            value(newValue, oldValue) {
                this.showValue = newValue;
            },
            showValue(newValue, oldValue) {
                this.$emit('input', newValue);
            },
        },
        mounted() {
        }
    };
</script>

<style scoped>

</style>
